import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
    state = {
      list:[],
      todo:''
    }
    change=(e)=>{
      this.setState({
        todo:e.target.value
      })
    }
    submit=(e)=>{
      if(e.keyCode == 13){
        //证明是回车键
        this.setState({
          list:this.state.list.concat(this.state.todo),
          todo:''
        })
      }
    }
    del(n){
      console.log(n)
      this.state.list.splice(n,1)
      this.setState({})
    }
    render() {
        let {list,todo} = this.state;
        return <div className=''>
          <input type="text" value={todo} onChange={this.change} onKeyDown={this.submit}/>
          <ul>
            {
              list.map((item,index)=><li key={index}>{item} <button onClick={this.del.bind(this,index)}>X</button></li>)
            }
          </ul>
        </div>;
    }
}

ReactDOM.render(<App/>,document.getElementById('root'))